<template>
  <div class="container">
    <div class="search-box">
      <span class="margin-left-m">知识标题:</span>
      <el-input
        v-model="searchForm.knowTitle"
        placeholder="请输入搜索的知识标题"
        style="width: 200px"
        class="margin-left-m"
        size="small"
      />
      <span class="margin-left-m">知识状态:</span>
      <el-select
        v-model="searchForm.knowState"
        class="margin-left-m"
        placeholder=""
        size="small"
        clearable
      >
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        class="margin-left-m"
        type="primary"
        size="small"
        @click="getTableList()"
      >检索</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
      <el-table-column align="center" prop="knowTitle" label="知识标题" />
      <el-table-column align="center" prop="knowCateName" label="知识类别" />
      <el-table-column align="center" prop="knowState" label="状态">
        <template slot-scope="scope">
          <span
            :class="{
              danger: scope.row.knowState === 1,
              warning: scope.row.knowState === 2 || scope.row.knowState === 5,
              success: scope.row.knowState === 3,
              primary: scope.row.knowState === 0,
            }"
          >{{ scope.row.knowState | knowStateFilter }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="auditUser" label="审查人" /> -->
      <el-table-column align="center" prop="staffCode" label="发布人" />
      <el-table-column label="操作" width="300" align="left">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            @click="handleRead(scope.row)"
          >详情</el-button>
          <el-button
            v-if="scope.row.knowState === 5"
            size="mini"
            type="primary"
            plain
            @click="handleAudit(scope.row, 3)"
          >审核通过</el-button>
          <el-button
            v-if="scope.row.knowState === 5"
            size="mini"
            type="danger"
            plain
            @click="handleAudit(scope.row, 2)"
          >打标不规范</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="searchForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="searchForm.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="详情" :visible.sync="readDialogVisible" width="70%">
      <div class="detail-box">
        <div>
          知识标题:
          <span class="right-content">{{ detailForm.knowTitle }}</span>
        </div>
        <div>
          知识类别:
          <span class="right-content">{{ detailForm.knowCateName }}</span>
        </div>
        <div class="detail-content-box">
          <div class="detail-content-left">知识内容:</div>
          <div v-if="detailForm.daBiaoContent" class="lbl-content">
            <div
              class="detail-content-right detail-left"
              v-html="detailForm.daBiaoContent"
            />
            <div class="detail-label-box">
              <div
                v-for="(label, labelIndex) in detailForm.itemDetails"
                :key="labelIndex"
                :style="{ border: '1px solid' + label.labelColor }"
                class="detail-label-item-box"
                @click="clickLabel(label)"
              >
                <div class="label-top-box">
                  <div
                    class="label-color-box"
                    :style="{ background: label.labelColor }"
                  />
                  <div>
                    {{ label.labelName }}
                  </div>
                </div>
                <div class="detail-label-content" :title="label.lblContent">
                  {{ label.lblContent }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            class="detail-content-right"
            v-html="detailForm.knowContent"
          />
        </div>
        <div
          v-if="editFileList.length !== 0"
          style="display: flex; margin-top: 10px"
        >
          <div style="margin-right: 10px">附件列表:</div>
          <div
            v-for="(file, fileIndex) in editFileList"
            :key="fileIndex"
            class="file-box download-file"
            @click="handleDownload(file)"
          >
            <div>{{ file.fileName }}</div>
            <!-- <div>
              <el-button
                type="danger"
                size="mini"
                style="margin-left: 10px"
                @click="deleteFile(file)"
                >删除</el-button
              >
            </div> -->
          </div>
        </div>
        <div v-if="editFileList.length == 0" class="margin-top: 10px;">
          暂无附件
        </div>
      </div>
      <div slot="footer">
        <el-button @click="readDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getAuditsKM, getByKnowId, updateKnowAPI, getFilesByKnowId } from '@/api/knowMan'
export default {
  filters: {
    knowStateFilter: function(value) {
      if (value === 1) { return '形式审查未通过' }
      if (value === 2) { return '打标不规范' }
      if (value === 3) { return '审核通过' }
      if (value === 0) {
        return '待形式审查'
      }
      if (value === 4) {
        return '待打标'
      }
      if (value === 5) {
        return '打标完成待审核'
      }
      return value
    }
  },
  data() {
    return {
      tableData: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        knowTitle: '',
        knowState: '',
        auditUser: ''
      },
      userInfo: {},
      total: 0,
      stateOptions: [{
        value: '',
        label: '全部'
      }, {
        value: 4,
        label: '待审核'
      }, {
        value: 0,
        label: '待形式审查'
      }, {
        value: 1,
        label: '形式审查未通过'
      }, {
        value: 2,
        label: '打标不规范'
      }, {
        value: 3,
        label: '审核通过'
      }
      ],
      readDialogVisible: false,
      detailForm: {
        daBiaoContent: ''
      },
      editFileList: []
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.staffCode = this.userInfo.username ? this.userInfo.username : this.userInfo.staffCode
    this.searchForm.auditUser = this.staffCode
    this.getTableList()
  },
  methods: {
    // 获取知识列表
    getTableList() {
      const param = {
        ...this.searchForm
      }
      getAuditsKM(param).then((res) => {
        this.tableData = res.list.records
        this.total = res.list.total
      })
    },
    // 点击详情
    handleRead(row) {
      getByKnowId({
        knowId: row.knowId
      }).then((res) => {
        this.readDialogVisible = true
        this.detailForm = { ...res.item }
      }).catch((err) => {
        console.log(err)
      })
      this.getFilesByKnowId(row.knowId)
    },
    // 点击下载附件
    handleDownload(row) {
      axios({
        method: 'post',
        url: '/know-api/knowArchFiles/Download',
        responseType: 'blob',
        params: {
          url: row.fileURL
        }
      }).then((res) => {
        if (res.status === 200) {
          const fileName = row.fileName
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(res.data)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        } else {
          this.$notify.error({
            title: '',
            message: '下载异常'
          })
        }
      })
    },
    // 获取知识的附件 knowId
    getFilesByKnowId(id) {
      getFilesByKnowId({
        knowId: id
      }).then((res) => {
        this.editFileList = res.data
      })
    },
    // 点击审核
    handleAudit(row, state) {
      const param = {
        knowId: row.knowId,
        auditUser: this.staffCode,
        knowState: state
      }
      updateKnowAPI(param).then((res) => {
        this.$message.success('审核成功')
        this.getTableList()
      })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.getTableList()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 15px;
}
.search-box {
  display: flex;
  align-items: center;
  color: rgb(96, 98, 102);
  font-size: 15px;
}
.margin-left-m {
  margin-left: 10px;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
/*   详情样式****/

div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
.detail-box {
  font-size: 16px;
  line-height: 30px;
}
.right-content {
  margin-left: 8px;
}
.detail-content-box {
  display: flex;
}
.detail-content-left {
  width: auto;
  white-space: nowrap;
  margin-right: 10px;
}
.detail-content-right {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 7px 10px;
}
.lbl-content {
  display: flex;
}
.detail-left {
  flex: 3;
}
.detail-label-box {
  flex: 1;
  min-width: 200px;
}
.detail-label-item-box {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  margin-left: 10px;
}
.label-top-box {
  display: flex;
  align-items: center;
}
.label-color-box {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
}
.detail-label-content {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 26px;
}

/****/

.file-box {
  display: flex;
  align-items: center;
}
.download-file {
  color: #409eff;
  cursor: pointer;
}
</style>
